<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4K Rhythm Game - 音律节奏</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/game.css') }}">
    <style>
        /* 返回按钮样式 */
        .back-button {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1000;
            padding: 10px 20px;
            background: rgba(0, 255, 255, 0.2);
            border: 2px solid #00ffff;
            border-radius: 5px;
            color: #00ffff;
            text-decoration: none;
            font-family: 'Arial', sans-serif;
            font-weight: bold;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        .back-button:hover {
            background: rgba(0, 255, 255, 0.4);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <!-- 返回按钮 -->
    <a href="{{ url_for('main.index') }}" class="back-button">← 返回博客</a>

    <div class="game-container">
        <!-- 标题和信息栏 -->
        <div class="header">
            <h1 class="game-title">
                <span class="glitch" data-text="4K RHYTHM GAME">4K RHYTHM GAME</span>
            </h1>
            <div class="info-bar">
                <div class="info-item">
                    <span class="label">SCORE</span>
                    <span class="value" id="score">0</span>
                </div>
                <div class="info-item">
                    <span class="label">COMBO</span>
                    <span class="value" id="combo">0</span>
                </div>
                <div class="info-item">
                    <span class="label">ACCURACY</span>
                    <span class="value" id="accuracy">100%</span>
                </div>
            </div>
        </div>

        <!-- 游戏主画布 -->
        <div class="game-wrapper">
            <canvas id="gameCanvas"></canvas>

            <!-- 判定反馈 -->
            <div id="judgmentFeedback" class="judgment-feedback"></div>

            <!-- 按键提示 -->
            <div class="key-hints">
                <div class="key-hint" data-key="0">D</div>
                <div class="key-hint" data-key="1">F</div>
                <div class="key-hint" data-key="2">J</div>
                <div class="key-hint" data-key="3">K</div>
            </div>
        </div>

        <!-- 控制面板 -->
        <div class="control-panel">
            <!-- 乐曲选择 -->
            <div class="control-group song-select-group">
                <label for="songSelect">选择乐曲：</label>
                <select id="songSelect" class="skin-select">
                    <option value="">-- 请选择乐曲 --</option>
                </select>
                <button id="refreshSongsBtn" class="btn btn-secondary" title="刷新乐曲列表">刷新</button>
            </div>

            <!-- 选中乐曲信息 -->
            <div id="songInfo" class="song-info" style="display: none;">
                <span class="song-title" id="selectedSongTitle"></span>
                <span class="song-artist" id="selectedSongArtist"></span>
                <span class="song-difficulty" id="selectedSongDifficulty"></span>
            </div>

            <!-- 本地文件上传（折叠） -->
            <details class="local-file-section">
                <summary>使用本地文件</summary>
                <div class="control-group">
                    <label for="chartFile">选择谱面文件：</label>
                    <input type="file" id="chartFile" accept=".json">
                </div>
                <div class="control-group">
                    <label for="audioFile">选择音乐文件：</label>
                    <input type="file" id="audioFile" accept="audio/*">
                </div>
            </details>

            <div class="control-group">
                <button id="startBtn" class="btn btn-primary">开始游戏</button>
                <button id="pauseBtn" class="btn btn-secondary" disabled>暂停</button>
                <button id="resetBtn" class="btn btn-danger">重置</button>
            </div>

            <div class="control-group">
                <label>速度：<span id="speedValue">1.0</span>x</label>
                <input type="range" id="speedSlider" min="0.5" max="2.0" step="0.1" value="1.0">
            </div>

            <div class="control-group">
                <label for="skinSelect">音符皮肤：</label>
                <select id="skinSelect" class="skin-select">
                    <option value="bar">条型（默认）</option>
                    <option value="circle">圆形</option>
                    <option value="arrow">箭头型</option>
                </select>
            </div>
        </div>

        <!-- 使用说明 -->
        <div class="instructions">
            <h3>游戏说明</h3>
            <ul>
                <li>使用 <kbd>D</kbd> <kbd>F</kbd> <kbd>J</kbd> <kbd>K</kbd> 四个按键进行游戏</li>
                <li>当音符下落到判定线时按下对应按键</li>
                <li><strong>普通音符</strong>：青色，点击即可</li>
                <li><strong>Drag音符</strong>：紫色长条，需要按住按键直到结束</li>
                <li>判定等级：PERFECT (±40ms) > GREAT (±80ms) > GOOD (±120ms) > MISS</li>
            </ul>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/game.js') }}"></script>
</body>
</html>
